<template>
  <!-- 设备管理 -->
  <div class="device-box">
    <div class="TreeCard-box" :class="{'is-expand':!isExpand}" :style="{width: `${expandLeft}px`,'display':lefDisplay}">
      <TreeCard
        class="tree-card"
        :tree-config="treeConfig"
        @clickBtn="clickBtn"
        @handleNodeClick="handleNodeClick"
      />
    </div>
    <div class="expand-box" :style="{left:`calc(${expandLeft}px)`}" @click="handleExpand">
      <i :class="[isExpand ? 'el-icon-caret-left' : 'el-icon-caret-right']" />
    </div>
    <div class="CardItems-box">
      <CardItems
        ref="deviceCardItemsRef"
        :tab-list="tabList"
        @handleClickTab="handleClickTab"
        :card-config="cardConfig"
        :pop-config="popConfig"
        :select-config="selectConfig"
        :header-config="headerConfig"
        :dynamic-select-list="selectConfig"
        :outer-params="nodeSelect"
        @selectChange="selectChange"
      />
    </div>
  </div>
</template>

<script>
import CardItems from '@/components/CardItems'
import { cardConfig } from './config/cardConfig'
import { popConfig } from './config/popConfig'
import { headerConfig } from './config/tableConfig'
import { selectConfig } from './config/selectConfig'
import api from '@/api/apis/sceneRoom'
import { parseSceneData } from '@/utils/scene-data'
import TreeCard from '@/components/TreeCard/index.vue'
import { treeConfig } from '@/views/sceneManage/sceneProject/config/cardConfig'

import { cardConfig as meterCardConfig } from '@/views/energy/meterDevice/config/cardConfig'
import { popConfig as meterPopConfig } from '@/views/energy/meterDevice/config/popConfig'
import { headerConfig as meterHeaderConfig } from '@/views/energy/meterDevice/config/tableConfig'
import { selectConfig as meterSelectConfig } from '@/views/energy/meterDevice/config/selectConfig'

export default {
  name: 'Device',
  components: {
    TreeCard,
    CardItems
  },
  data() {
    return {
      nodeSelect: {},
      isExpand: true,
      lefDisplay: '',
      expandLeft: 200,
      activeTab: 'device',
      tabList: [
        { key: 'device', name: '设备' },
        { key: 'meterDevice', name: '计量设备' }
      ],
      cardConfig: cardConfig['device'],
      popConfig: popConfig['device'],
      selectConfig: selectConfig['device'],
      headerConfig: headerConfig['device']
    }
  },
  computed: {
    treeConfig() {
      return treeConfig['scene-project'] || {}
    }
  },
  methods: {
    handleExpand() {
      this.isExpand = !this.isExpand
      this.lefDisplay = this.isExpand ? '': 'none'
      this.expandLeft = this.isExpand ? 200 : 0
    },
    handleClickTab(tab) {
      if (tab.index == '0') {
        this.cardConfig = cardConfig['device']
        this.popConfig = popConfig['device']
        this.selectConfig = selectConfig['device']
        this.headerConfig = headerConfig['device']
      } else {
        const meterCard = meterCardConfig['meter-device']
        meterCard.isShowTabs = true
        meterCard.cunrrenTabIndex = 'meterDevice'
        this.cardConfig = meterCard
        this.popConfig = meterPopConfig['meter-device']
        this.selectConfig = meterSelectConfig['meter-device']
        this.headerConfig = meterHeaderConfig['meter-device']
      }
    },
    clickBtn(btn) {
      if (btn.id === 'all') {
        this.handleNodeClick({ type: 0 })
      }
    },
    handleNodeClick(data) {
      this.type = data.type
      if (data.type === 1) {
        this.nodeSelect = { sceneProjectId: data.id }
      } else if (data.type === 2) {
        this.nodeSelect = { sceneEdificeId: data.id }
      } else if (data.type === 3) {
        this.nodeSelect = { sceneFloorId: data.id }
      } else if (data.type === 4) {
        this.nodeSelect = { sceneRoomId: data.id }
      } else {
        this.nodeSelect = {}
      }
      this.$nextTick(() => {
        this.$refs.deviceCardItemsRef?.getData()
      })
    },
    /**
     * @param selectData   回传表单的选择数据
     * @param prop        事件触发的表单字段
     * @param selectList  回传的表单配置项
     */
    selectChange(selectData, prop, selectList) {
      if (prop === 'sceneProjectId') {
        this.getRoomList(selectData[prop], selectList, selectData)
      }
      if (prop === 'sceneInfo') {
        const infos = selectData[prop]
        selectData.sceneEdificeId = infos[0] || undefined
        selectData.sceneFloorId = infos[1] || undefined
        selectData.sceneRoomId = infos[2] || undefined
      }
    },
    meterSelectChange(selectData, prop, selectList) {
      this.selectChange(selectData, prop, selectList)
    },
    /**
     * 获取空间列表
     * @param sceneProjectId
     */
    async getRoomList(sceneProjectId, selectList, selectData) {
      this.selectList = JSON.parse(JSON.stringify(selectList))
      const res = await api.queryRoomList({
        sceneProjectId,
        sortColumn: 'floorName',
        sortOrder: 'asc'
      })
      const roomList = parseSceneData(res.data)
      const configItem = selectList[5]
      configItem.optionList = roomList
      this.$set(this.selectList, 5, {
        ...configItem
      })
      this.$refs.deviceCardItemsRef.setSelectModuleValue({
        ...selectData
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.device-box {
  display: flex;
  width: 100%;
  height: 100%;

  .expand-box {
    position: absolute;
    top: 50%;
    height: 40px;
    line-height: 40px;
    width: 12px;
    text-align: center;
    margin-top: -20px;
    font-size: 12px;
    color: #909399;
    background-color: #ededed;
    border-radius: 0 4px 4px 0;
    transition: left 0.3s;
    cursor: pointer;
    z-index: 3;

    &:hover {
      background-color: #ddd;
    }

    .el-input__icon {
      font-style: normal;
      font-weight: 400;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      vertical-align: baseline;
      display: inline-block;
    }
  }

  .TreeCard-box {
    height: 100%;
    transition: all 0.3s;

    .tree-card {
      border: 1px solid #eee;
      background-color: #fff;
    }

    &.is-expand {
      overflow: hidden;
      margin-right: 0;
    }
  }

  .CardItems-box {
    flex: 1;
  }
}
</style>
